<template>
  <div class="fans">
    <h2>粉丝列表</h2>
    <p class="fans-classify">按关注时间排序</p>
    <div style="margin-top: 15px">
      <table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
        <thead class="fans-box">
          <!-- <div class="fans-box"> -->
          <tr>
            <th class="fans-title">头像/用户名称</th>
            <th class="fans-signature">签名</th>
            <th class="fans-operation">操作</th>
          </tr>
          <!-- </div> -->
        </thead>
        <tbody class="fans-table">
          <tr v-for="item in fansList" :key="item.friendId">
            <td class="fans-name">
              <img :src="item.friendAvatar" class="fans-picture" />
              <p>{{ item.friendName }}</p>
            </td>
            <td class="fans-sign">
              <p>{{ item.friendSignature }}</p>
            </td>
            <td>
              <el-button type="text" @click="isConcerned" class="abolish">取消关注</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        class="change-fans"
        :before-close="handleClose"
      >
        <div style="text-align: center">
          <div>
            <img
              src="../../assets/images/hamburger.png"
              class="fans-store-avator"
            />
          </div>
          <p class="fans-store-title">停止关注 @塔斯汀</p>
        </div>
        <span slot="footer" class="dialog-footer fans-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="removeFansFollowFun()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getFansListApi, removeFansFollowApi } from "@/api/fans";
export default {
  data() {
    return {
      fansList: [],
      dialogVisible: false,
      userInfo: this.$store.state.userInfo,
    };
  },
  created() {
    this.fansListFun();
  },
  methods: {
    removeFansFollowFun() {
      removeFansFollowApi({
        userId: this.userInfo.userId,
        fansId: this.fansId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.fansListFun();
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "已取消关注",
          });
        } else {
          this.$message({
            type: "info",
            message: "取消失败",
          });
        }
      });
    },
    fansListFun() {
      getFansListApi().then((res) => {
        console.log(res);
        if (res.data.data.code == 200) {
          this.fansList = res.data.data.data;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    isConcerned() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.fans {
  width: 96%;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  margin: auto;
}

.fans-box {
  margin-top: 15px;
  text-align: left;
  width: 100%;
  height: 35px;
  background: #f2f2f4;
  font-weight: 600;
  color: #7c7a7a;
}
.fans-title {
  width: 35%;
  padding: 0 0 0 10px;

  /* margin-left: 14px; */
  box-sizing: border-box;
}
.fans-signature {
  width: 55%;
}
.fans-picture {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  border-radius: 90px;
}
.fans-table tr {
  height: 70px;
  font-size: 14px;
}
.fans-table tr:hover {
  background: #f2f2f4;
}
.fans-name p {
  line-height: 70px;
  margin-left: 10px;
}
.fans-name {
  display: flex;
  margin-left: 5px;
  text-align: center;
}
.fans-name p {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 10px;
  box-sizing: 10px;
  text-overflow: ellipsis;
}
.fans-sign p {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 10px;
  box-sizing: 10px;
  text-overflow: ellipsis;
}
.fans-store-avator {
  width: 90px;
  height: 90px;
  border-radius: 90px;
}
.fans-store-title {
  margin-top: 15px;
  font-size: 16px;
}
.change-fans .el-dialog .el-dialog__footer {
  text-align: center !important;
}
.fans-footer .el-button {
  padding: 8px 40px;
}
.fans-footer .el-button--primary {
  color: #fff;
  background-color: #ff2c55;
  border: none;
}
.fans-classify {
  margin-top: 10px;
  font-size: 14px;
  color: #a5a4a4;
}
.abolish{
  font-weight: 600;
    color: rgb(0, 0, 0);
}
</style>
